<template>
    <!-- <view class="login" style="background: url(https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/login/login-bg1.png) 100% 20%/120% 120%;"> -->
    <!-- <view class="login" style="background: url(/static/login/login-bg1.png) 100% 20%/120% 120%;"> -->
    <view class="login">
        <!-- 当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。 -->
        <view class="bar-height"></view>
        <image
            src="https://suyuan-axt.tianxunwang.com:10098/assets/suyuan-axt/portal/logo.png"
            :draggable="false"
            mode="scaleToFill"
            class="logo-2"
        ></image>
        <!-- <view class="logo"></view> -->
        <view class="login-text-2">消防产品上速援安消通</view>
        <!-- 登录账号 -->
        <view
            class="myforms"
        >
            <!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">用户授权登录</button> -->
            <button @click="onConfirm">用户授权登录</button>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload } from '@dcloudio/uni-app'
    import { markRaw, onBeforeUnmount, reactive, ref } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { getTenantsApi, postAuthLoginApi, getWxPhoneApi } from '@/apis/index'
    import { isPhone } from '@/utils/utils'
    let redirectUrl = ''
    const onConfirm = async() => {
        try {
            let res1: any = await getTenantsApi({
                slug: 'suyuan-axt'
            })
            uni.login({
                provider: 'weixin', //使用微信登录
                onlyAuthorize: true,
                success: function (loginRes) {        
                    // console.log(loginRes);
                    postAuthLoginApi({
                        tenantId: res1.data.id,
                        loginType: 'wechat',
                        wxCode: loginRes.code
                    }).then((res2: any) => {
                        if (res2.code == 200) {
                            uni.setStorageSync('token', res2.data)
                            uni.setStorageSync('userId', res2.userId)
                            if (redirectUrl) {
                                uni.reLaunch({
                                    url: redirectUrl
                                });
                            } else {
                                uni.reLaunch({
                                    url: '/pages/index/index'
                                });
                            }
                        }
                    })
                    // uni.switchTab({
                    //     url: "/pages/index/index"
                    // })
                },
                fail(err) {
                    uni.showToast({
                        icon: "error",
                        mask: true,
                        title: '请稍后再试'
                    });
                    console.error(err);
                },
                complete() {
                    // uni.hideLoading();
                }
            });
        } catch(err) {
            // console.log('走了catch', err)
            uni.showToast({
                icon: "error",
                mask: true,
                title: '请稍后再试'
            });
        }
    }
    onLoad((opt: any) => {
        console.log(opt)
        if (opt.url) {
            redirectUrl = decodeURIComponent(opt.url)
        }
    })
    onUnload(() => {
        
    })
    
</script>

<style lang="scss" scoped>
    .login::before {
        content: '';
        width: 100vw;
        // height: 100vh;
        height: calc(100vh - var(--window-top) - var(--window-bottom)); //var(--window-top) 页面的内容区域距离顶部距离 var(--window-bottom) 页面的内容区域距离底部距离 app不存在，h5有这两个高度
        // background: url(@/static/login/login-bg4.png) 50% 70%/120% 110%;
        // background-size: 100% 100%;
        box-sizing: border-box;
        padding: 0 60rpx;
        // display: flex;
        // flex-direction: column;
        // align-items: center;
        position: absolute;
        z-index: -1;
        overflow: hidden;
        
        background: url(https://suyuan-axt.tianxunwang.com:10098/assets/suyuan-axt/portal/login-bg1.png);
        background-size: 100% 100%;
        // filter: blur(15rpx);
    }
    .login {
        width: 100vw;
        height: calc(100vh - var(--window-top) - var(--window-bottom)); //var(--window-top) 页面的内容区域距离顶部距离 var(--window-bottom) 页面的内容区域距离底部距离 app不存在，h5有这两个高度
        position: absolute;
    }
    .bar-height {
        width: 100vw;
        height: var(--status-bar-height);
    }
    .logo {
        width: 320rpx;
        height: 320rpx;
        background: url(https://suyuan-axt.tianxunwang.com:10098/assets/suyuan-axt/portal/logo.png);
        background-size: 100% 100%;
        margin: 300rpx auto 10rpx;
    }
    .logo-2 {
        display: flex;
        width: 320rpx;
        height: 320rpx;
        margin: 300rpx auto 10rpx;
    }
    .login-text-1 {
        padding: 20rpx 40rpx;
        color: #fff;
        font-weight: bold;
        text-shadow: 0 0rpx 10rpx #aaaaff;
    }
    .login-text-2 {
        padding: 0rpx 0 60rpx 0rpx;
        color: #000;
        font-weight: bold;
        font-size: 30rpx;
        text-align: center;
        // text-shadow: 0 0rpx 20rpx #aaaaff;
        font-family: '黑体';
        letter-spacing: 16rpx;
    }
    .img-1 {
        width: 750rpx;
        height: 200rpx;
    }
    .myforms {
        background-color: rgba(255, 255, 255, 0.1);
        padding: 60rpx 40rpx;
        box-sizing: border-box;
        min-height: 400rpx;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    :deep(.myforms .uni-forms-item__label) {
        color: #fff;
    }
    .phone-vc {
        display: flex;
        button {
            width: 150rpx;
            height: 74rpx;
            font-size: 30rpx;
        }
    }
    .tips {
        box-sizing: border-box;
        padding: 60rpx 0 0 0;
        display: flex;
        justify-content: space-between;
        color: #fff;
    }
    .checkbox-class {
        display: flex;
        align-items: center;
        padding: 30rpx 0;
        box-sizing: border-box;
    }
    .dialog-content {
        height: 800rpx;
        overflow: scroll;
        .dialog-text-1 {
            font-weight: bold;
        }
        .dialog-text-2 {
            color: #313131;
            text-indent: 70rpx;
            line-height: 50rpx;
        }
    }
    :deep(.uni-data-checklist .checklist-group .checklist-box) {
        margin-right: 10rpx;
    }
</style>
